<template>
  <nav-bar>
    <template v-slot:left>返回</template>
    <template v-slot:center>内容</template>
    <template v-slot:right>登录</template>
  </nav-bar>

  <nav-bar>
    <template v-slot:[currentSlot]>动态插槽</template>
  </nav-bar>
  <button @click="changeslot">切换</button>
</template>

<script>
  import NavBar from './NavBar.vue';
  export default {
    components: {
      NavBar
    },
    data() {
      return {
        position: 0,
        slot: ["left", "center", "right"],
        currentSlot: "left"
      }
    },
    methods: {
      changeslot() {
        if (this.position == 2) {
          this.position = 0
          this.currentSlot = this.slot[this.position]
        } else {
          this.position++
          this.currentSlot = this.slot[this.position]
        }
      }
    }
  }
</script>

<style scoped>
</style>